<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>搜索结果</title>
		<link rel="stylesheet" href="./css/reset.css">
		<link rel="stylesheet" href="./css/search_result.css">
	</head>
	<body>
		<header class="header">
			<img class="arrow" src="./img/my_favorite/img-1_10.png" alt="">
			<span class="title">搜索结果</span>
		</header>
		<div class="search_body">
			<div class="search_frame_box">
				<input class="search_frame" placeholder="马卡龙色 多功能早餐机" type="text">
				<div class="search_icon"><img src="./img/search/search_03.png" alt=""></div>
			</div>
			<div class="serve">
				<div class="item">综合</div>
				<div class="item">销售</div>
				<div class="item">新品</div>
				<div class="item"><span>价格</span>
					<span class="icon_img">
						<div><img class="icon_top" src="./img/search/img_03.png" alt="">
						</div>
						<div><img class="icon_bottom" src="./img/search/img_07.png" alt="">
						</div>
					</span>
				</div>
			</div>
			<div class="search_content">
				<ul>
				</ul>
			</div>
			<div class="icon_fixed"><img src="./img/search/img_11.png" alt=""></div>
		</div>
		<script>
			// 1.ajax实例
			var ajax = new XMLHttpRequest()
			// 2.初始化请求
			ajax.open("GET","http://localhost:3002/goods/list?pageSize=5&pageIndex=2")
			// 3.发送请求
			ajax.send()
			// 4.监听readyState
			ajax.addEventListener('readystatechange',function(){
				if(ajax.readyState === 4){
					var res = JSON.parse(ajax.responseText)
					console.log(res)
				if(res.status){
					// 渲染数据
					var osSarchContentUl= document.querySelector(".search_content ul")
					res.data.forEach(function(item){
                     var list =`<li>
						<div class="img_box"><img class="search_img" src="${item.img_md}" alt=""></div>
						<div class="content_box">
							<div class="text">${item.name}</div>
							<div class="introduce">${item.hotPoint}</div>
							<div class="price">${item.price}</div>
						</div>
					</li>` 
					// 插入DOM
					osSarchContentUl.insertAdjacentHTML('beforeend',list)
					})
				}
				}
			})
		</script>
	</body>
</html>
